/**
 * 匀速运动的封装
 * @param {*} obj  哪一个运动的元素对象 例如：div、span
 * @param {*} attr 运动的什么属性
 * @param {*} step 步长
 * @param {*} target 目标值
 * 多元素的匀速运动
 */
function move(obj,attr,step,target){
    step = target > parseInt(getStyle(obj,attr)) ? step : -step;
    //因为定时器共用，所以需要给每一个元素建立一个自己的定时器
    //可以将全局变量变换成每一个元素的自定义属性来实现
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){ // 1
        var start = parseInt(getStyle(obj,attr)) + step; 
        if((start>=target && step>0) || (step<0 && start<=target)){
            start = target;
        }
        obj.style[attr] = start+"px";
        if(start==target){
            clearInterval(obj.timer);
        }
    },100);
}

/**
 * 缓冲运动的封装
 * @param {*} obj  哪一个运动元素对象 例如：div，span....
 * @param {*} attr 具体运动的属性
 * @param {*} target 目标值
 * 多元素的单属性变化
 */
function BufferMove(obj,attr,target){
    //如果有多个元素。那么定时器共同了，停止了一个元素，其他元素都会受影响
    // clearInterval(timer);
    //给每一个元素都分配一个属性
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        //缓冲速度：由快变慢
        //3、获取元素的初始位置
        if(attr=="opacity"){
            var start = parseFloat(getStyle(obj,attr)) * 100; 
        }else{
            var start = parseInt(getStyle(obj,attr)); //500px
        }
        //计算缓冲速度 公式：（目标值 - 初始值）/运动系数
        var speed = (target - start) / 10; 
        //到底是Math.ceil还是Math.floor 取决于speed值是否大于0
        speed = speed>0?Math.ceil(speed):Math.floor(speed);
        //4、更新位置
        if(attr=="opacity"){
            obj.style[attr] = (start+speed) /100;
        }else{
            obj.style[attr] = start+speed+"px";
        }
        //5、只要元素到达了目标点就停止定时器
        if(start==target){
            clearInterval(obj.timer);
        }
    },100)
}

/***
 * 多个元素/单个元素之间的多属性变化
 */
function BufferJSON(obj,json,fn){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        //缓冲速度：由快变慢
        //假设每一组键值对都到达了目标点
        var tag = true;
        for(var attr in json){

            //3、获取元素的初始位置
            if(attr=="opacity"){
                var start = parseFloat(getStyle(obj,attr)) * 100; 
            }else{
                var start = parseInt(getStyle(obj,attr)); //500px
            }
            //计算缓冲速度 公式：（目标值 - 初始值）/运动系数
            var speed = (json[attr] - start) / 10; 
            speed = speed>0?Math.ceil(speed):Math.floor(speed);
            //4、更新位置
            if(attr=="opacity"){
                obj.style[attr] = (start+speed) /100;
            }else{
                obj.style[attr] = start+speed+"px";
            }
            //5、只要元素到达了目标点就停止定时器
            if(start!=json[attr]){
                tag = false;
            }
        }

        //如果所有的属性键值对都到达了目标点才清除定时器
        if(tag==true){
            clearInterval(obj.timer);
            //继续执行某一个动画效果！！！
            fn && fn(); //由于回调函数不是每一次执行都必须要实现的效果，所以要先保证必须有函数结构，才能拿来调用
        }
        
    },100)
}